<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>JQuery Console Demo</title>
    <meta name="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery.console.js"></script>
    <!-- Everything beyond this point is user-customized -->
    <script type="text/javascript">
      $(document).ready(function(){
         /* First console */
         var console1 = $('<div class="console1">');
         $('body').append(console1);
         var controller1 = console1.console({
           promptLabel: 'Demo> ',
           commandValidate:function(line){
             if (line == "") return false;
             else return true;
           },
           commandHandle:function(line){
               return [{msg:"=> [12,42]",
                        className:"jquery-console-message-value"},
                       {msg:":: [a]",
                        className:"jquery-console-message-type"}]
           },
           autofocus:true,
           animateScroll:true,
           promptHistory:true,
           charInsertTrigger:function(keycode,line){
              // Let you type until you press a-z
              // Never allow zero.
              return !line.match(/[a-z]+/) && keycode != '0'.charCodeAt(0);
           }
         });
         /* Second console */
         var console2 = $('<div class="console2">');
         $('body').append(console2);
         var controller2 = console2.console({
           promptLabel: 'JavaScript> ',
           commandValidate:function(line){
             if (line == "") return false;
             else return true;
           },
           commandHandle:function(line){
               try { var ret = eval(line);
                     if (typeof ret != 'undefined') return ret.toString();
                     else return true; }
               catch (e) { return e.toString(); }
           },
           animateScroll:true,
           promptHistory:true,
           welcomeMessage:'Enter some JavaScript expressions to evaluate.'
         });
         controller2.promptText('5 * 4');
         /* Third console */
         var console3CancelFlag = false;
         var console3 = $('<div class="console3">');
         $('body').append(console3);
         var controller3 = console3.console({
           promptLabel: 'Echo> ',
           commandValidate:function(line){
             if (line == "") return false;
             else return true;
           },
           commandHandle:function(line,report){
               setTimeout(function() {
		   if(!console3CancelFlag)
		       report(line);
		   else {
		       report([{msg:"User interrupt",
				className:"jquery-console-message-error"}]);
		       console3CancelFlag = false;
		   }
	       },1000);
           },
           cancelHandle:function() {
	       console3CancelFlag = true;
	   },
           animateScroll:true,
           promptHistory:true
         });
         /* Fourth console */
         var console4 = $('<div class="console4">');
         $('body').append(console4);
         var controller4 = console4.console({
           promptLabel: 'SQL> ',
           continuedPromptLabel: '  -> ',
           commandValidate:function(line){
             if (line == "") return false;
             else return true;
           },
           commandHandle:function(line,report){
              if (line.match(/;$/)) {
                 controller4.continuedPrompt = false;
                 alert("Execute: " + line);
                 return true;
              } else {
                 controller4.continuedPrompt = true;
                 return;
              }
           },
           promptHistory:true
         });
         /* Fifth console */
         var console5 = $('<div class="console1">');
         $('body').append(console5);
         var controller5  = console5.console({
          promptLabel: 'Complete> ',
          commandHandle:function(line){
            if (line) {
              return [{msg:"you typed " + line,className:"jquery-console-message-value"}];
            } else {
              var m = "type a color among (" + this.colors.join(", ") + ")";
              return [{msg:m,className:"jquery-console-message-value"}];
            }
          },
          colors: ["red","blue","green","black","yellow","white","grey"],
          cols: 40,
          completeHandle:function(prefix){
            var colors = this.colors;
            var ret = [];
            for (var i=0;i<colors.length;i++) {
              var color=colors[i];
              if (color.lastIndexOf(prefix,0) === 0) {
                ret.push(color.substring(prefix.length));
              }
            }
            return ret;
          }
         });
         /* Sixth console */
         var console6 = $('<div class="console6">');
         $('body').append(console6);
         var controller6 = console6.console({
           promptLabel: 'Periodic> ',
           commandValidate:function(line){
             if (line == "") return false;
             else return true;
           },
           commandHandle:function(line){
               return [{msg:"=> [12,42]",
                        className:"jquery-console-message-value"},
                       {msg:":: [a]",
                        className:"jquery-console-message-type"}]
           },
           autofocus:true,
           animateScroll:true,
           promptHistory:true
         });
         var counter = 0;
         setInterval(function() {
             controller6.report([{msg:"The counter is at " + (counter++) + ".",
                                  className:"jquery-console-message-value"},
                                 {msg:(counter * 3) + " seconds have elapsed.",
                                  className:"jquery-console-message-type"}]);
         }, 3000);
       });
    </script>
    <style type="text/css" media="screen">
      div.console1,div.console2,div.console3 { word-wrap: break-word; }
      /* First console */
      div.console1 { font-size: 14px }
      div.console1 div.jquery-console-inner
       { width:900px; height:200px; background:#333; padding:0.5em;
         overflow:auto }
      div.console1 div.jquery-console-prompt-box
       { color:#fff; font-family:monospace; }
      div.console1 div.jquery-console-focus span.jquery-console-cursor
       { background:#fefefe; color:#333; font-weight:bold }
      div.console1 div.jquery-console-message-error
       { color:#ef0505; font-family:sans-serif; font-weight:bold;
         padding:0.1em; }
      div.console1 div.jquery-console-message-value
       { color:#1ad027; font-family:monospace;
         padding:0.1em; }
      div.console1 div.jquery-console-message-type
       { color:#52666f; font-family:monospace;
         padding:0.1em; }
      div.console1 span.jquery-console-prompt-label { font-weight:bold }
      /* Second console */
      div.console2 { font-size: 14px; margin-top:1em }
      div.console2 div.jquery-console-inner
       { width:900px; height:200px; background:#efefef; padding:0.5em;
         overflow:auto }
      div.console2 div.jquery-console-prompt-box
       { color:#444; font-family:monospace; }
      div.console2 div.jquery-console-focus span.jquery-console-cursor
       { background:#333; color:#eee; font-weight:bold }
      div.console2 div.jquery-console-message-error
       { color:#ef0505; font-family:sans-serif; font-weight:bold;
         padding:0.1em; }
      div.console2 div.jquery-console-message-success
       { color:#187718; font-family:monospace;
         padding:0.1em; }
      div.console2 span.jquery-console-prompt-label { font-weight:bold }
      /* Third console */
      div.console3 { font-size: 14px; margin-top:1em }
      div.console3 div.jquery-console-inner
       { width:900px; height:200px; background:#efefef; padding:0.5em;
         overflow:auto }
      div.console3 div.jquery-console-prompt-box
       { color:#444; font-family:monospace; }
      div.console3 div.jquery-console-focus span.jquery-console-cursor
       { background:#333; color:#eee; font-weight:bold }
      div.console3 div.jquery-console-message-error
       { color:#ef0505; font-family:sans-serif; font-weight:bold;
         padding:0.1em; }
      div.console3 div.jquery-console-message-success
       { color:#187718; font-family:monospace;
         padding:0.1em; }
      div.console3 span.jquery-console-prompt-label {
      font-weight:bold }
      /* Fourth console */
      div.console4 { font-size: 14px; margin-top:1em }
      div.console4 div.jquery-console-inner
       { width:900px; height:200px; background:#efefef; padding:0.5em;
         overflow:auto }
      div.console4 div.jquery-console-prompt-box
       { color:#444; font-family:monospace; }
      div.console4 div.jquery-console-focus span.jquery-console-cursor
       { background:#444; color:#eee; font-weight:bold }
      div.console4 div.jquery-console-message-error
       { color:#ef0505; font-family:sans-serif; font-weight:bold;
         padding:0.1em; }
      div.console4 div.jquery-console-message-success
       { color:#187718; font-family:monospace;
         padding:0.1em; }
      div.console4 span.jquery-console-prompt-label { font-weight:bold }
      /* Sixth console */
      div.console6 { font-size: 14px }
      div.console6 div.jquery-console-inner
       { width:900px; height:200px; background:#333; padding:0.5em;
         overflow:auto }
      div.console6 div.jquery-console-prompt-box
       { color:#fff; font-family:monospace; }
      div.console6 div.jquery-console-focus span.jquery-console-cursor
       { background:#fefefe; color:#333; font-weight:bold }
      div.console6 div.jquery-console-message-error
       { color:#ef0505; font-family:sans-serif; font-weight:bold;
         padding:0.1em; }
      div.console6 div.jquery-console-message-value
       { color:#1ad027; font-family:monospace;
         padding:0.1em; }
      div.console6 div.jquery-console-message-type
       { color:#52666f; font-family:monospace;
         padding:0.1em; }
      div.console6 span.jquery-console-prompt-label { font-weight:bold }
    </style>
  </head>
  <body>
    <noscript>
      <p>
        <strong>Please enable JavaScript or upgrade your browser.</strong>
      </p>
    </noscript>
    <h1>Simple console demo</h1>
    <p>Tested on:</p>
    <ul>
      <li>Internet Explorer 6</li>
      <li>Opera 10.01</li>
      <li>Chromium 4.0.237.0 (Ubuntu build 31094)</li>
      <li>Firefox 3.5.8</li>
    </ul>
  </body>
</html>
